<script setup>
import loginRegister from '@/components/loginRegister.vue';
import { ref } from 'vue';
import { notification } from 'ant-design-vue';
import { message } from 'ant-design-vue';
import { MailOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';

const formRef = ref()
const formModel = ref({
  email: '',
  password: '',
  repassword: '',
  phone: '',
  defPhone: '+86',//手机区号
  captcha: ''
})

// 规则
const formRules = {
  email: [
    {
      required: true,
      message: '请输入邮箱',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    }
  ],
  repassword: [
    {
      validator: (rule, value, callback) => {
        if (formModel.value.password !== formModel.value.repassword) {
          callback(new Error('密码不一致'))
        } else {
          callback()
        }
      },
    },
    {
      required: true,
      message: '请再次输入密码',
      trigger: 'blur',
    }
  ],
  phone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur',
    }
  ],
  captcha: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur',
    }
  ]
}

const router = useRouter()

// 验证码
const myCaptcha = ref()//验证码
const cutdown = ref(0)  // 倒计时
const totalSeconds = 60//倒计时总秒数
const getCaptcha = () => {
  myCaptcha.value = Math.floor(1000 + Math.random() * 2000) % 10000
  notification['success']({
    message: '提示',
    description:
      `验证码获取成功，您的验证码为：${myCaptcha.value}`,
  });
  cutdown.value = totalSeconds
  const timer = setInterval(() => {
    cutdown.value--
    if (cutdown.value === 0) {
      clearInterval(timer)
    }
  }, 1000)
  // 发送提示
  const key = 'updatable';
  message.loading({
    content: '验证码发送中...',
    key,
  });
  setTimeout(() => {
    message.success({
      content: '发送成功!',
      key,
      duration: 2,
    });
  }, 1000);
}

// 注册
const register = () => {
  formRef.value
    .validate()
    .then(() => {
      router.push({ path: '/login' })
    })
    .catch(error => {
      console.log('error', error);
    });
}

// 去登录
const goLogin = () => {
  router.push('/login')
}
</script>
<template>
  <loginRegister>
    <div class="main">
      <h3>注册</h3>
      <!-- 表单 -->
      <a-form ref="formRef" :model="formModel" :rules="formRules">
        <a-form-item name="email">
          <a-input v-model:value="formModel.email" size="large" placeholder="邮箱" />
        </a-form-item>
        <a-form-item name="password">
          <a-input-password v-model:value="formModel.password" size="large" placeholder="密码"></a-input-password>
        </a-form-item>
        <a-form-item name="repassword">
          <a-input-password v-model:value="formModel.repassword" size="large" placeholder="确认密码"></a-input-password>
        </a-form-item>

        <a-row style="display: flex;justify-content: space-between;">
          <div style="width: 20%;">
            <a-form-item>
              <a-select v-model:value="formModel.defPhone" size="large">
                <a-select-option value="+86">+86</a-select-option>
                <a-select-option value="+87">+87</a-select-option>
              </a-select>
            </a-form-item>
          </div>
          <div style="width: 80%;">
            <a-form-item name="phone">
              <a-input v-model:value="formModel.phone" size="large" placeholder="手机号" />
              <!-- <a-input v-model:value="formModel.phone" size="large" placeholder="手机号" /> -->
            </a-form-item>
          </div>
        </a-row>

        <a-form-item name="captcha">
          <div style="display: flex; justify-content: space-between;">
            <a-input v-model:value="formModel.captcha" size="large" placeholder="验证码"
              style="margin-bottom: 12px;width:230px;">
              <template #prefix>
                <MailOutlined style="color:rgb(207, 207, 207);" />
              </template>
            </a-input>
            <a-button style="width: 110px; font-size: 14px;" size="large" @click="getCaptcha" :disabled="cutdown > 0">{{
              cutdown > 0 ? `${cutdown}s` : '获取验证码' }}
            </a-button>
          </div>
        </a-form-item>
        <a-form-item>
          <div style="display: flex;justify-content: space-between;">
            <a-button type="primary" size="large" @click="register" style="width: 40%;">注册</a-button>
            <a-button type="link" size="large" style="width: 40%;" @click="goLogin">使用已有账号登录</a-button>
          </div>
        </a-form-item>
      </a-form>

    </div>
  </loginRegister>

</template>
